<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

{% load truncate_filter %}
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta robots content="all" />
    <link rel="stylesheet"    href="/assets/style/main_page.css"  type="text/css" />
    <script type="text/javascript" src="/assets/javascript/base.js">           </script>


    <link rel="shortcut icon" href="/assets/graphics/favicon.ico" type="image/ico" />
    <title>
      Potton Online Interactive Map | Your local web site |   {% if not all %} 
{% regroup markers|dictsort:"itemtype.name" by itemtype as marker_list %}
  {% for type in marker_list %} 
    {% for item in type.list|dictsort:"name" %}
      {{item.name}}, 
    {% endfor %}
  {% endfor %}
{% endif %}
    </title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAhcP5rdJ8gtI2Tvrvo88B3BR_tirkabJaindNc0FoauOGCOWtrBTLuwigpG4UD6tSDw3AxxYNXLmcVg"
    type="text/javascript">
    </script> 
    
<script>    
var markerGroups = {
{% for mtype in markertypes %}
  {% ifnotequal mtype.name 'New Marker' %}
  "{{mtype.safename}}": [] {% if not forloop.last %},{% endif %}
  {% endifnotequal %}
{% endfor %}
};

mapper = {
  load: function() {
    if (GBrowserIsCompatible()) {
      mapper.map = new GMap2(document.getElementById("innerMap"));
      mapper.map.setUIToDefault();
      mapper.map.setCenter(new GLatLng(52.1300, -0.2190), 15);
      mapper.map.setMapType(G_SATELLITE_MAP);
      mapper.map.disableScrollWheelZoom();  // This is annoying me, might turn it in to a check box
      
      {% for marker in markers %}
      mapper.addMarker({{marker.lat}}, {{marker.lon}},
        '{{marker.name|escapejs}}','{{marker.itemtype.icon.id}}',
        '{{marker.thumbnail|escapejs}}',
        '{{marker.itemtype.safename}}',"{{marker.description|linebreaks}}", '{{marker.id}}',
        '{{marker.public_phone}}', '{{marker.slug}}'
        );
      {% endfor %}
    }    
  },
    
  addMarker: function(lat, lng, name, icon, thumb, type, descr, uid, phone,slug) {
    var gicon = new GIcon();
    for (k in mapper.ICONS[icon]) {
      gicon[k] = mapper.ICONS[icon][k];
    }
    var marker = new GMarker(new GLatLng(lat, lng), 
      {draggable:false, bouncy:false, icon: gicon});
    markerGroups[type].push(marker);
    marker.tab1 = '<a href="/'+slug+'"> '+name + '</a><br />Phone: '+phone
    marker.iwtabs= [
      new GInfoWindowTab("About", marker.tab1),
      new GInfoWindowTab("Photo", '<img src="'+thumb+'" alt="No picture available at the moment" />')
      ];
    GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowTabs(marker.iwtabs, {maxWidth:320});
      return false;
    });
    mapper.map.addOverlay(marker);
    mapper['marker'+uid] = marker;
  },
  
  ICONS: {
    {% for icon in icons %}
    "{{ icon.id }}" : {
      image: '/assets/map/icons/{{icon.image|escapejs}}',
      shadow: '/assets/map/icons/{{icon.shadow.image|escapejs}}',
      size: new GSize({{icon.width}},{{icon.height}}),
      shadowsize: new GSize({{icon.shadow.width}},{{icon.shadow.height}}),
      iconAnchor: new GPoint({{icon.anchor_x}},{{icon.anchor_y}}),
      infoWindowAnchor: new GPoint({{icon.window_anchor_x}},{{icon.window_anchor_y}})
    } {% if not forloop.last %},{% endif %}
    {% endfor %}
  },
  
 toggleGroup: function(type) {
   typeCheckbox = type+"Checkbox";
   if (document.getElementById(typeCheckbox).checked) {
     for (var i = 0; i < markerGroups[type].length; i++) {
       var marker = markerGroups[type][i];
         marker.show();
     }
   }
   else {
     for (var i = 0; i < markerGroups[type].length; i++) {
       var marker = markerGroups[type][i];
       marker.hide();
     }
   }
 },
 
 toggleGroupAll: function() {
   if (!(document.getElementById('allCheckbox').checked)) {
     for (var type in markerGroups) {
       for (var i = 0; i < markerGroups[type].length; i++) {
         markerGroups[type][i].hide()
       }
       typeCheckbox = type+"Checkbox";
       document.getElementById(typeCheckbox).checked = false;
     }
   }
   else {
     for (var type in markerGroups) {
       for (var i = 0; i < markerGroups[type].length; i++) {
         markerGroups[type][i].show()
       }
       typeCheckbox = type+"Checkbox";
       document.getElementById(typeCheckbox).checked = true;
     }
   }
 },

 moveMap: function(inlat, inlng, inmarker){
   var tglatlng = new GLatLng(inlat, inlng)
   mapper.map.panTo(tglatlng);
   mapper[inmarker].openInfoWindowTabs(mapper[inmarker].iwtabs);
   return false;
 }
  
}
</script>

</head>
  <body onload="mapper.load()" onunload="GUnload()">
    <div id="loginbox">
      {% if not user.is_authenticated %}
        <a href="/login">Log in</a>&nbsp&nbsp|&nbsp&nbsp<a href="/signup/">Sign Up</a>&nbsp&nbsp|&nbsp&nbsp
      {% else %}
        Welcome back {{user.username|capfirst}}.  |  <a href="/mymarkers">Your Markers</a>  |  <a href="/logout">Logout</a>
      {% endif %}
      <form method="POST" action="/search"><input type="text" id="loginboxsearch" name="search_term" /><input id="loginboxsubmit" type="submit" value="Search" /></form>
    </div>
    <div id="hills"></div><div id="weather"></div><div class="top"><a href="/"><span>www.pottononline.net</span></a></div>

<hr />
 
 
<div class="col2" style="width: 22%;padding: 1%; text-align: justify; color: #000000; position: absolute; left: 0px; top: 220px;">
{% include "map/default_pageleft.html" %}
</div>
<hr />
<div class="right" style="color: #000000;">

  


<div id="map" style="width:100%; height:800px; overflow: hidden;" >
     <div id="innerMap" style="width: 99%; height: 800px; overflow: hidden;background-color: #e5e3df; margin: 0.2%;" > </div>
        <div id="sidebar">
       <br />
     {% for mtype in markertypes %}
       {% ifnotequal mtype.name "New Marker" %}
         <label title="{{mtype.name}}">
         <input type="checkbox" id="{{mtype.safename}}Checkbox" onclick="mapper.toggleGroup('{{mtype.safename}}')" CHECKED=CHECKED />
         {{mtype.name|truncatesmart:15}}
         </label>
         <br />
       {% endifnotequal %}
     {% endfor %}
     <p><label title="All markers"><input title="All markers" type="checkbox" id="allCheckbox" onclick="mapper.toggleGroupAll()" CHECKED=CHECKED/> All</label></p>
     <br />
     
     {% if not all %}
     <ul class="list">
     {% regroup markers|dictsort:"itemtype.name" by itemtype as marker_list %}
     {% for type in marker_list %}
      {% for item in type.list|dictsort:"name" %}
          <li class="list" title="{{item.name}}"> <a onclick="mapper.moveMap({{item.lat}},{{item.lon}}, 'marker{{item.id}}')">{{item.name}}</a><br />
      {% endfor %}
      <hr />
     {% endfor %}
     </ul>
   {% endif %}
   </div>
   </div>
<hr />
{% if user.is_authenticated %}
<a href="/edit">Since you are logged in you can also edit your own markers using the map viewer</a>
{% endif %}
</div>
 <hr />





<hr />

    {% if bad_browser %}
				<h2 style="background-color: red; padding: 5px;" >Please consider upgrading your web browser.  Internet Explorer version 6 (if that is what you're using) doesn't not support some modern internet standards.  
				You should consider upgrading to Firefox available FOR FREE from here: <a href="http://www.mozilla-europe.org/en/firefox/">http://www.mozilla-europe.org/en/firefox/</a></h2>
    {% endif%}
    
    <hr/>
<div id="footer">
  <!-- Google Tracking -->
  <script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  </script>
  <script type="text/javascript">
  try {
  var pageTracker = _gat._getTracker("UA-3468586-2");
  pageTracker._trackPageview();
  } catch(err) {}</script>
</div>

<div class="bigoak">
  <span class="footer" ><a href="/">Home</a>  |  <a href="/about">About</a>  |  <a href="/advertise">Advertise</a>  |  <a href="/contact">Contact</a>  |  
  <a href="/logout">Logout</a>  |  <a href="/help_us">Can you help?</a>  |  <a href="/awards">Potton Awards</a> 
</div>
    
  </body>
</html>
